<template>
  <div ref="echartRef" style="width:100%;height:100%"></div> 
</template>

<script>
import * as charts from "echarts"
import 'echarts-gl';
//
export default {
  props:["option","defaultOption","img"],
  data:() => ({
    mychart:undefined,
  }),
  methods:{
    init(){
      console.log('=====>',this)
      if(this.$refs.echartRef){
        this.mychart = charts.init(this.$refs.echartRef)
        //
        if(this.defaultOption){
          this.mychart.setOption(this.defaultOption)
        }
        if(this.option){
          this.mychart.setOption(this.option)
        }
      }
    }
  },
  mounted(){
    this.init();
  },
  watch:{
    option:{
      handler(v){
        if(this.mychart){
          this.mychart.setOption(v)
        }
      },
      deep:true,
    }
  }
}
</script>